<template>
  <div class="container">
    <!-- 顶部搜索区域 -->
    <el-card>
      <el-row :gutter="30">
        <el-col :span="6">
          <div>库区名称</div>
          <el-input v-model="params.areaName" placeholder="请输入" />
        </el-col>
        <el-col :span="6">
          <div>库位名称</div>
          <el-input v-model="params.name" placeholder="请输入" />
        </el-col>
        <el-col :span="6">
          <div>库位状态</div>
          <el-select v-model="params.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            class="btn"
            @click="searchBtn"
          >搜索</el-button>
          <el-button class="btn" @click="resetBtn">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格区域 -->
    <el-card>
      <el-row
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="18">
          <el-button style="background-color: #00be76;color: #fff" @click="addBtn">新增库位</el-button>
        </el-col>
        <el-col :span="6">
          <el-button>下载库位模板</el-button>
          <el-button>导入库位信息</el-button>
        </el-col>
      </el-row>
      <!-- table表格 -->
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        />
        <el-table-column
          label="所属仓库"
          prop="warehouseName"
          width="150"
          align="center"
        />
        <el-table-column
          label="库区编码"
          prop="areaCode"
          width="150"
          align="center"
        />
        <el-table-column
          label="库区名称"
          prop="areaName"
          width="150"
          align="center"
        />
        <el-table-column
          label="库位编号"
          prop="code"
          width="150"
          align="center"
        />
        <el-table-column
          label="库位名称"
          prop="name"
          width="150"
          align="center"
        />
        <el-table-column
          label="温度类型"
          prop="temperatureType"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ temperatureTypeMap[scope.row.temperatureType] }}
          </template>
        </el-table-column>
        <el-table-column
          label="承重类型"
          prop="bearingType"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ bearingTypeMap[scope.row.bearingType] }}
          </template>
        </el-table-column>
        <el-table-column
          label="用途属性"
          prop="useType"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ useTypeMap[scope.row.useType] }}
          </template>
        </el-table-column>
        <el-table-column
          label="停用状态"
          prop="status"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ statusMap[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          label="承载上限"
          prop="maxNum"
          width="150"
          align="center"
        />
        <el-table-column
          label="更新时间"
          prop="updateTime"
          width="150"
          align="center"
        />
        <el-table-column
          label="操作"
          width="150"
          align="center"
          fixed="right"
        >
          <template>
            <el-button type="text">编辑</el-button>
            <el-button type="text">停用</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :current-page="params.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { pageLocationDetail } from '@/api'
export default {
  data() {
    return {
      // 参数
      params: {
        // 当前页数
        current: 1,
        // 每页条数
        size: 10,
        // 库区名称
        areaName: '',
        // 库位名称
        name: ''
      },
      // 表格数据列表
      tableData: [],
      // 总条数
      total: 0,
      // 温度类型 映照关系
      temperatureTypeMap: {
        'CW': '常温',
        'LC': '冷藏',
        'HW': '恒温'
      },
      // 承重类型 映照关系
      bearingTypeMap: {
        'ZX': '重型',
        'QX': '轻型'
      },
      // 用途属性 映照关系
      useTypeMap: {
        'RKHCQ': '入库缓存区',
        'CKHCQ': '出库缓存区',
        'CCQ': '存储区',
        'FLQ': '分拣区',
        'ZJQ': '质检区'
      },
      // 停用状态 映照关系
      statusMap: {
        0: '停用',
        1: '启用'
      },
      // 选择器
      options: [
        { value: 0, label: '停用' },
        { value: 1, label: '启用' },
        { value: null, label: '全部' }
      ]
    }
  },
  created() {
    this.pageLocationDetail()
  },
  methods: {
    // 获取列表数据
    async pageLocationDetail() {
      const { data } = await pageLocationDetail(this.params)
      // console.log(data)
      this.tableData = data.records
      this.total = data.total
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.params.size = val
      this.pageLocationDetail()
    },
    // 当前页数改变时会触发
    handleCurrentChange(val) {
      this.params.current = val
      this.pageLocationDetail()
    },
    // 搜索
    searchBtn() {
      this.pageLocationDetail()
    },
    // 重置
    resetBtn() {
      this.params = {
        current: 1,
        size: 10,
        areaName: '',
        name: ''
      }
      this.pageLocationDetail()
    },
    // 新增
    async addBtn() {
      this.$router.push({
        name: 'LocationDetails'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 25px;
}
.el-card {
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 15px;
}
.el-col div {
  color: #887e7e;
  font-size: 12px;
  margin-bottom: 10px;
}
.el-button {
  border-radius: 50px;
}
.btn {
  margin-top: 25px;
}
</style>
